<template>
	<view class="uni_box home">
		<navbar title='题库练习' :yin="true">
		</navbar>
		<view class="content">
			<view class="lianview" v-for="(item,index) in list" :key="index">
				<view class="lianone"  @click.stop="listClick(item,index)">
					<image class="quan" v-if="!item.iszhan" src="@/pages_subject/static/img/quanjia.png" mode="" />
					<image class="quan" v-if="item.iszhan" src="@/pages_subject/static/img/quan.png" mode="" />
					<view class="liannav">
						<text class="tibiao">{{item.title}}</text>
						<text class="tishu">总题数：<text class="tinum">{{item.count}}</text></text>
					</view>
					<!-- <u-icon class="ricon" name="arrow-down" color="#333" size="28"></u-icon>
					<u-icon class="ricon" style="display: none;" name="arrow-up" color="#333" size="28"></u-icon> -->
				</view>
				<view class="liatwo"  v-if="item.iszhan&&item.nav" v-for="(i,ind) in item.nav" :key="ind">
					<view class="quan"></view>
					<view class="ltone">
						<text class="lmiaoname">{{ i.title }}</text>
						<view class="lmiantwo">
							<text class="tishu">题数：<text class="tishunum">{{i.count}}</text></text>
							<text class="tishu">进度：<text class="tishunum">{{i.yes}}/{{ i.count }}</text></text>
							<text class="tishu">正确率：<text class="tishunum">{{i.bfb}}</text></text>
						</view>
					</view>
					<view class="biaoview" v-for="(j,k) in i.buts" :key="k">
						<image class="del" @click.stop="delClick(i,ind,index)" v-if="j=='clear'" src="@/pages_subject/static/img/del.png" mode="" />
						<image class="del" v-if="j=='statistics'" src="@/pages_subject/static/img/zhang.png" mode="" />
						<image class="del" v-if="j=='continue'" @click.stop="navClick(i)" src="@/pages_subject/static/img/bo.png" mode="" />
						<image class="del" v-if="j=='start'" @click.stop="navClick(i)" style="width: 20rpx;" src="@/pages_subject/static/img/xue.png" mode="" />
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				combo_id:''
			}
		},
		onLoad(option) {
			if(option.combo_id){
				this.combo_id = option.combo_id
			}
			this.getList();//1级题
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getList(){
				let res = await this.$u.api.getListForLevel1ByZhike({
					page:this.page,
					combo_id:this.combo_id
				});
				this.last_page = res.lastpage;
				let list = res.list;
				for(let i in list){
					list[i].iszhan = false
					list[i].nav = []
				}
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				
				if(this.page >= this.last_page){
				  this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			async listClick(item,index){
				let list = this.list
				let res = await this.$u.api.getListForLevel2ByZhike({
					cid:item.id,
					combo_id:this.combo_id
				});
				list[index].iszhan = !list[index].iszhan
				list[index].nav = res.list
				this.list = list
				// console.log(this.list)
			},
			delClick(i,ind,index){
				// doClear
				//退出登陆
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确认清除做题数据么？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					// showCancel: false, // 是否显示取消按钮，默认为 true
					// confirmColor: '#f55850',
					// cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						that.getqingchu(i,ind,index)
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
			},
			async getqingchu(i,ind,index){
				let res = await this.$u.api.doClearByZhike({
					id:i.id
				});
				this.$u.toast("操作成功");
				// let list = this.list
				// list[index].nav.splice(ind,1)
				// this.list = list
				let list = this.list
				list[index].iszhan = !list[index].iszhan
				// list[index].nav.splice(ind,1)
				this.list = list
			},
			async navClick(i){
				let res = await this.$u.api.getTopicListByZhike({
					cid:i.id
				});
				this.navrouter("/pages_subject/twoPage/TiPage/ZhikeDetail?id="+i.id+'&sort='+res.sort);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		// padding-bottom: 150rpx;
		padding: 30rpx 30rpx;
		.lianview{
			margin-bottom: 20rpx;
		}
		.lianone{
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 0;
			.quan{
				width: 42rpx;
				height: 42rpx;
				margin-right: 20rpx;
			}
			.tibiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}
			.tishu{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #A3A3A3;
				display: block;
				margin-top: 10rpx;
			}
			.tinum{
				color: rgba(253, 134, 79, 1);
			}
		}
		.ricon{
			margin-left: auto;
		}
		.liatwo{
			margin-left: 20rpx;
			display: flex;
			// padding-left: 20rpx;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 20rpx;
			.quan{
				width: 10rpx;
				height: 10rpx;
				background-color: rgba(253, 134, 79, 1);
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.ltone{
				display: flex;
				flex-direction: column;
				width: 80%;
				.lmiaoname{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
				.lmiantwo{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 15rpx;
					justify-content: space-between;
					.tishu{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #A3A3A3;
						display: inline-block;
						margin-right: 20rpx;
					}
					.tishunum{
						color: rgba(253, 134, 79, 1);
					}
				}
				
			}
			.del{
					width: 28rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}
		}
	}
	.biaoview{
		display: flex;
		flex: 1;
		justify-content: flex-end;
		// align-items: flex-end;
	}
</style>
